<template>
    <el-form :model="form">
        <el-form-item label=" 三级联动选择器省市区:">
            <el-select v-model="form.province" clearable placeholder="省" @change="seletekey($event, 'province')">
                <el-option v-for="( val, key ) in  provinces " :key="key" :label="val" :value="val" />
            </el-select>
            <el-select v-model="form.city" clearable placeholder="市" @change="seletekey($event, 'city')">
                <el-option v-for="( val, key ) in  citys " :key="key" :label="val" :value="val" />
            </el-select>
            <el-select v-model="form.area" clearable placeholder="区" @change="seletekey($event, 'area')">
                <el-option v-for="( val, key ) in  areas " :key="key" :label="val" :value="val" />
            </el-select>
        </el-form-item>
    </el-form>
</template>
   
<script>
//数据获取
import { pcaa } from 'area-data'
export default {
    data() {
        return {
            form: {},
            pcaaData: pcaa,
            // 区域数据
            provinces: pcaa['86'],
            citys: [],
            areas: []
        }
    },
    methods: {
        seletekey(e, type) {
            if (e) {
                switch (type) {
                    case 'province':
                        Object.keys(this.provinces).filter(item => {
                            if (this.provinces[item] === e) {
                                this.citys = this.pcaaData[item]
                            }
                        })
                        break
                    case 'city':
                        Object.keys(this.citys).filter(item => {
                            if (this.citys[item] === e) {
                                this.areas = this.pcaaData[item]
                            }
                        })
                        break
                    case 'area':
                        break
                }
            }
        }
    }
}
</script>